<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入评论内容(最多输入120个字)" maxlength="120" v-model="msg"></textarea>

        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comments" :key="item.commendId">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{ item.userName}}&nbsp;&nbsp;发表时间：{{item.addTime|dateFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content === null ? '此用户很懒，啥都没写' : item.content}}
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    import {Toast} from "mint-ui"
     export default {
        data() {
            return{
                //commentType:this.$route.params.commentType,//评论类型
                pageIndex:1 ,//默认从第一页展示数据
                comments:[],
                msg:"" ,//输入评论内容
                userName:"匿名用户"
            }
        },
         methods:{
            getComments() {//获取评论
                this.$http.get("/api/comment/getCommentsByArtId/"+this.commentType+"/"+this.id+"?currentPage="+this.pageIndex).then(res=>{
                    if(res.body.success ===true) {
                        //this.comments = res.body.page.list;
                        //每当获取新评论数据不要覆盖老数据，而是拼接老数据
                        this.comments = this.comments.concat( res.body.page.list);
                    }else{
                        Toast("评论加载失败")
                    }
                })
            },
             getMore() {
                this.pageIndex++;
                this.getComments();
             },
             postComment() {
                //校验是否为空
                 if(this.msg.trim().length ===0) {
                     return Toast("评论内容不能为空！");
                 }

                //发表评论
                 //post参数：
                 //1.请求url地址
                 //2.提交给服务器的数据对象 { content:this.msg}
                 //3.定义提交时，表单数据格式 {emulateJSON = true}
                this.$http.post("/api/comment/saveComment/"+this.commentType+"/"+ this.$route.params.id,{content:this.msg.trim(),userName:this.userName}).then(function (res) {
                    if(res.body.size>0) {
                        //1.拼接一个评论对象
                        var cmt={
                            userName:this.userName,
                            commentType:this.commentType,
                            content:this.msg.trim(),
                            addTime:Date.now()
                        };
                        this.comments.unshift(cmt);
                        this.msg=""
                    }else{
                        Toast("评论失败")
                    }
                })
             }


         },
         created() {
            this.getComments()
         },
         props:['id','commentType']
     }

</script>
<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-item{
            font-size: 13px;
            .cmt-title{
                line-height: 30px;
                background-color: #ccc;
            }
            .cmt-body{
                line-height: 35px;
                text-indent: 2em;
            }
        }
    }
}

</style>


